<template>
  <div style="display: flex;margin-top: 200px">
    <div>
      <img :src="'/project/productImg/'+product.img" width="400" height="400">
    </div>
    <div style="margin: 20px;font-size:x-large">
      <p>商品名：{{product.name}}</p>
      <p>单价：￥{{product.price}}</p>
      <p>产地：{{product.address}}</p>
      <p>生产日期：{{product.createDate}}</p>
      <p>已售出{{product.saleNum}}件</p>

      <el-button type="info" @click="$router.push('/index')">返回首页</el-button>
      <el-button type="primary" @click="buy(product.id)">购买</el-button>
    </div>
  </div>

</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      product:{}
    }
  }, methods: {
    showProduct(){
      var id = this.$route.query.id;
      axios.get("/project/product/findById",{params:{id}}).then(resp=>{
        this.product=resp.data;
      })

    },buy(productId){
  axios.get("/project/cart/buy",{params:{productId}}).then(resp=>{
    if (resp.data=="ok"){
      this.$router.push("/shopping/cart");
    }
  })
}
  },created(){
    this.showProduct();
  }
}
</script>

<style scoped>

</style>